<template>
  <view class="sms-wrapper">
    <LoginInput pd="0 50rpx" v-model:value="loginInfo.phone" title="手机号" type="number" place="请输入登录名/手机号">
      <view class="sms-tips" v-if="loginInfo.phone.length == 11" @tap="createInterval">
        <text v-if="smsNumber != 60">{{ smsNumber }}s</text>
        {{ smsNumber !== 60 ? '后可重新发送' : '发送验证码' }}
      </view>
    </LoginInput>
    <LoginInput v-model:value="loginInfo.verificationCode" title="短信验证码" type="number" place="请输入短信验证码"></LoginInput>
    <LoginButton @login="phoneCodeLogin" :isRegister="true"></LoginButton>
  </view>
</template>
<script setup>
import { ref, reactive } from 'vue'
import { $sendMessage, $login, $userInfo, $phoneCodeLogin, $getCompanyInfo } from '@/http/apiManager.js'

import { Base64 } from 'js-base64'
import LoginInput from '@/components/newComponents/LoginInput/LoginInput'
import LoginButton from './LoginButton'
const emits = defineEmits(['successLogin'])
const loginInfo = reactive({
  phone: '',
})
const smsNumber = ref(60)
let interval = null
// 创建定时器
let createInterval = () => {
  if (interval) return
  sendMsg()
  interval = setInterval(() => {
    openInterval()
  }, 1000)
}
// smsNumber -1 倒计时
const openInterval = () => {
  smsNumber.value--
  if (smsNumber.value <= 0) {
    smsNumber.value = 60
    clearInterval(interval)
    interval = null
  }
}
// 发送短信验证码"
const sendMsg = () => {
  if (interval) return
  $sendMessage({
    phone: loginInfo.phone,
    smsType: 'auth',
  })
    .then((res) => {
      const { bizData } = res
      uni.showToast({
        title: '发送成功',
        icon: 'success',
        mask: true,
      })
    })
    .catch((err) => {
      smsNumber.value = 60
      clearInterval(interval)
    })
}
// 验证码登录
const phoneCodeLogin = () => {
  if (!loginInfo.phone.length != 11 && !loginInfo.verificationCode) {
    uni.showToast({
      title: '请输入手机号和验证码',
      icon: 'none',
    })
  } else {
    $phoneCodeLogin({
      phone: Base64.encode(loginInfo.phone),
      code: Base64.encode(loginInfo.verificationCode),
      // #ifdef APP-PLUS
      lt: Base64.encode('APP'),
      // #endif
      // #ifdef H5 || MP-WEIXIN
      lt: Base64.encode('LITE'),
      // #endif
    }).then((res) => {
      const { bizData } = res
      emits('successLogin', bizData.iToken)
    })
  }
}
</script>

<style lang="scss" scoped>
.sms-wrapper {
  .sms-tips {
    font-size: 28rpx;
    color: $primaryColor;
    margin-right: 30rpx;
  }
}
</style>
